<template>
  <div class="fb-box">
      <div class="fbBox">
        <el-table
        :data="tableData"
        border
        style="width: 903px">
            <el-table-column
            prop="allNum"
            align ='center'
            label="可分配用户总数"
            width="300">
            </el-table-column>
            <el-table-column
            prop="allFprc"
            align ='center'
            label="总分配人次"
            width="300">
            </el-table-column>
            <el-table-column
            prop="allZxcs"
            align ='center'
            label="计划执行次数"
            width="300"
            >
            </el-table-column>
        </el-table>
    </div>
    <div style="margin-bottom:80px;">
      <el-row :gutter="24">
            <el-col :span="6" style="margin-bottom:20px;">
              注册时间：
              <el-date-picker type="daterange"  v-model="registerTime" placeholder="选择日期范围">
              </el-date-picker>
            </el-col>
            <el-col :span="6" style="margin-bottom:20px;">
              联系时间：
              <el-date-picker type="daterange" v-model="LxTime" placeholder="选择日期范围">
              </el-date-picker>
            </el-col>
            <el-col :span="6" style="margin-bottom:20px;">
              客户年龄：
              <el-select v-model= "kehuAge.value" clearable placeholder="请选择客户年龄">
                <el-option v-for="(item,index) in kehuAge.options" :key="index" :value="item.value" :label="item.label">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6" style="margin-bottom:20px;">
              客户性质：
              <el-select v-model= "kehuXZ.value" clearable placeholder="请选择客户性质">
                <el-option v-for="(item,index) in kehuXZ.options" :key="index" :value="item.value" :label="item.label">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6" style="margin-bottom:20px;">
              用户评分：
              <el-select v-model= "userScore.value" clearable placeholder="请选择评分">
                <el-option v-for="(item,index) in userScore.options" :key="index" :value="item.value" :label="item.label">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6" style="margin-bottom:20px;">
              账户状态：
              <el-select v-model= "zhState.value" clearable placeholder="请选择状态">
                <el-option v-for="(item,index) in zhState.options" :key="index" :value="item.value" :label="item.label">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6" style="margin-bottom:20px;">
              客户来源：
              <el-select v-model= "kehuLY.value" clearable placeholder="请选择状态">
                <el-option v-for="(item,index) in kehuLY.options" :key="index" :value="item.value" :label="item.label">
                </el-option>
              </el-select>
            </el-col>
            
            <el-col :span="3" :offset="3" style="margin-left:0">
              <el-button type="primary" @click="choiceFn">筛选</el-button>
              
            </el-col>
          </el-row>
    </div>
    <div class="fbBox">
        <table class="daidalist">
          <tr>
            <th v-for="item in callInfoLoc.titles"
              :key="item.prop"
              v-text="item.label"
              :style="`width:${item.width};`"
            ></th>
          </tr>
          <tr v-for="(item,index) in callInfoLoc.tableData" :key="index">
            <!-- 序号 -->
            <td>{{item.id}}</td>
            <!-- 筛选条件 -->
            <td>
              <span v-for="(item,index) in newSplit(item.condition)" :key="index" style="display:block;line-height:24px;text-indent:0;">{{item}}</span>
            </td>
            <!-- 筛选总数 -->
            <td>{{item.all_num}}</td>
            <!-- 剩余数量 -->
            <td>{{item.remaining_num}}</td>
            <!-- 开始时间 -->
            <td>{{item.tdate}}</td>
            <!-- 分配周期 -->
            <td>{{item.interval_date}}</td>
            <!-- 分配次数 -->
            <td>{{item.frequency}}/{{item.all_frequency}}</td>
            <!-- 创建时间 -->
            <td>{{item.create_date}}</td>
            <!-- 状态 -->
            <td @click="stateFn(item.id)">{{item.state}}</td>
            <!-- 操作 -->
            <td class="look" @click="lookFn(item)">查看</td>
            <!-- <td>
              <span class="red" v-text="item.yhyx"></span>/
              {{item.bz}}
            </td> -->
          </tr>
          <!-- <tr v-if="callInfoLoc.tableData.length === 0" >
            <td :colspan="callInfoLoc.titles.length">
              暂无数据
            </td>
          </tr> -->
          
        </table>
        </el-table>
    </div>
    <div class="pagerBox">
            第{{currentPage}}页
            <span class="pager" @click="prev">上一页</span>
            <span class="pager" @click="next">下一页</span>
          </div>
    <el-dialog title="" :visible.sync="dialogFormVisible">
      <div style="margin-bottom:20px;">
        筛选总数：
        <span>{{sxNum}}</span>
      </div>
      <div style="margin-bottom:20px;">
        分配周期：
        <el-select v-model="Fpzq.value" clearable placeholder="请选择分配周期">
          <el-option v-for="(item,index) in Fpzq.options" :key="index" :value="item" :label="item"></el-option>
        </el-select>
      </div>
      <div style="margin-bottom:20px;">
        开始时间：
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="选择日期"
          :picker-options="pickerOptions0">
        </el-date-picker>
      </div>
      <div class="div1">
        <p style="margin-bottom:20px;">单个计划周期分配数</p>
        <div v-for="(item,index) in allKfs" :key="index" class="div2">
          <span style="line-height:32px;">{{item.name}}</span>
          <input type="text" class="text_input" v-model="allKfs[index].num">
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveFp">创建</el-button>
      </div>
    </el-dialog>
    <!-- 点击查看弹窗 -->
    <el-dialog title="计划详情" :visible.sync="dialogFormVisibleLook">
      <div style="margin-bottom:20px;">
        筛选总数：
        <span>{{lookData.all_num}}</span>
      </div>
      <div style="margin-bottom:20px;">
        分配周期：
        <span>{{lookData.interval_date}}</span>
      </div>
      <div style="margin-bottom:20px;">
        分配次数：
        <span>{{lookData.frequency}}/{{lookData.all_frequency}}</span>
      </div>
      <div style="margin-bottom:20px;">
        状态：
        <span>{{lookData.state}}</span>
      </div>
      <div style="margin-bottom:20px;">
        开始时间：
        <span>{{lookData.tdate}}</span>
      </div>
      <div class="div1">
        <p style="margin-bottom:20px;">单个计划周期分配数</p>
        <div v-for="(item,index) in lookFpData" :key="index" class="div2">
          <span style="line-height:32px;">{{item.name}}</span>
          <input type="text" class="text_input" v-model="lookFpData[index].num">
        </div>
        
      </div>
      
    </el-dialog>
    <el-dialog title="修改状态" :visible.sync="dialogFormVisibleState">
    <el-form>
       <el-select  v-model= "stateValue.value" placeholder="请选择状态">
          <el-option
            v-for="(item,index) in stateValue.options"
            :key="index"
            :value="item.value"
            :label="item.label"
          ></el-option>
          
        </el-select>
      
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisibleState = false">取 消</el-button>
      <el-button type="primary" @click="sureStateFp">确 定</el-button>
    </div>
  </el-dialog>
  </div>
    
  
</template>

<script>
import { dateFormat } from 'vux'
  export default {
    data() {
      return {
        
        dialogFormVisibleLook:false,
        lookData:'',
        lookFpData:'',
        currentPage:1,
        pageSize:{
          value:5
        },
        page:1,
        total:0,
        targetPage:1,
        inputValue:'',
        dialogFormVisibleState:false,
        stateValue:{
          value:'',
          id:'',
          options:[
            {value:1,label:'运行'},
            {value:3,label:'暂停'},
            {value:2,label:'结束'}
          ]
        },
        
        allKfs:'',
        sxNum:'',
        value1:'',
        pickerOptions0: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
        dialogFormVisible:false,//筛选弹框状态
        registerTime:'',//注册时间
        LxTime:'',//联系时间
        zhState:{//账户状态
          value:'',
          options: [{
            value: '1',
            label: '已实名未投资'
          }, {
            value: '2',
            label: '未实名未投资'
          }, {
            value: '3',
            label: '投资50到5000'
          }, {
            value: '4',
            label: '充值50以上未投'
          }, {
            value: '5',
            label: '非充值1元用户'
          }, {
            value: '6',
            label: '未激活用户'
          }]
        },
        kehuAge:{//客户年龄
          value:'',
          options: [{
            value: '1,23',
            label: '24岁以下'
          }, {
            value: '24,29',
            label: '24-29岁'
          }, {
            value: '30,49',
            label: '30-49岁'
          }, {
            value: '50,100',
            label: '50岁以上'
          }]
        },
        kehuXZ:{
          value:'',
          options:[
            {
              value:1,
              label:'2017年未激活'
            },
            {
              value:2,
              label:'2017年再投'
            },
            {
              value:3,
              label:'2017年流失客户'
            }
          ]
        },
        userScore:{//用户评分
          value:'',
          options: [{
            value: '0,500',
            label: '>0'
          }, {
            value: '0,50',
            label: '0-50'
          }, {
            value: '50,70',
            label: '50-70'
          }, {
            value: '70,80',
            label: '70-80'
          }, {
            value: '80,100',
            label: '80-100'
          }, {
            value: '100,500',
            label: '100以上'
          }]
        },
        kehuLY:{
          //客户来源
          value:'',
          options:[
            {value:1,label:'传播'},
            {value:2,label:'投资'},
            {value:3,label:'电信弹窗'},
            {value:4,label:'搜索网盟'},
            {value:5,label:'品牌广告'},
            {value:6,label:'应用市场'},
            {value:7,label:'其他广告'},
            {value:8,label:'cps渠道+异业联盟'},
            {value:9,label:'微信软文'},
            {value:10,label:'推手'},
            {value:11,label:'官网'},
            {value:12,label:'聚财'},
            {value:13,label:'其他'},
           
          ]
        },
        tableData: [{//分配数据
          allNum:'',
          allFprc: '',
          allZxcs: ''
        }],
        callInfoLoc: {//表格数据
          page: 1,
          pageSize: 10,
          total: 0,
          titles: [
            {
              label: '序号',
              prop: 'bdqk',
              width: '5%',
            },
            {
              label: '筛选条件',
              prop: 'ykfname',
              width: '20%',
            },
            {
              label: '筛选总数',
              prop: 'vip',
              width: '8%',
            },
            {
              label: '剩余数量',
              prop: 'fuid',
              width: '8%',
            },
            {
              label: '开始时间',
              prop: 'cName',
              width: '10%',
            },
            {
              label: '分配周期',
              prop: 'cMtel',
              width: '8%',
            },
            {
              label: '分配次数',
              prop: 'dsje',
            },
            {
              label: '创建时间',
              prop: 'sex',
            },
            {
              label: '状态',
              prop: 'khxz',
              
            },
            {
              label: '操作',
              prop: 'kfgroup',
            }
          ],
          tableData: []
        },
        Fpzq:{
          value:'',
          options:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]
        }
      }
    },
    
    mounted() {
      this.getCollect()
      this.getTabledata()
      this.newSplit()
    },
    methods:{
      lookFn(item){
        console.log(item)
        this.dialogFormVisibleLook = true
        this.lookData = item
        this.lookFpData = JSON.parse(item.plandata)
        console.log(this.lookFpData)
      },
      newSplit(item){
        
        if(item){
         return item.split('|')
        }
        
      },
      handleCurrentChange(val) {
        val = Number.parseFloat(val)
        if(Number.isNaN(val)){
          this.$toast({
            message: '请输入页码'
          })
          return
        }
        if(val < 1 ){
          this.$toast({
            message: '已经是第一页了'
          })
          return
        }else if(val > this.currentPage && this.callInfoLoc.tableData.length < this.pageSize.value){
          this.$toast({
            message: '后面没内容了'
          })
          return
        }
        
        this.currentPage = val
        this.getTabledata(val)
        
        
      },
      prev () {
        this.handleCurrentChange(this.currentPage - 1)
      },
      next () {
        this.handleCurrentChange(this.currentPage + 1)
      },
      stateFn(id){
        this.stateValue.id = id
        this.dialogFormVisibleState = true
      },
      sureStateFp(){
        this.dialogFormVisibleState = false
        this.$get(this,{
          api:'/pond/updatePondState.do',
          data:{
            id:this.stateValue.id,
            state:this.stateValue.value
          }
        }).then((data)=>{
          if(data.data.state ===0){
                this.$message({
                  message: data.data.message || '修改成功',
                  type: 'success'
                });
              this.getTabledata(1,10)
            }else{
              this.$toast({
                  message: data.data.message
              });
            }
        })
      },
      saveFp(){
        
            this.$get(this,{
            api:"	/pond/savePondPlan.do",
            data:{
              Interval:this.Fpzq.value,
              khxz:this.kehuXZ.value,//新增客户性质
              tdate:this.value1 && dateFormat(this.value1, 'YYYY-MM-DD'),
              arr:JSON.stringify(this.allKfs),
              num:this.sxNum,
              fRegfrom:this.kehuLY.value,//新增客户来源
              tDate:this.registerTime && dateFormat(this.registerTime[0], 'YYYY-MM-DD'),//注册时间开始
              tDate1:this.registerTime && dateFormat(this.registerTime[1], 'YYYY-MM-DD'),//注册时间结束
              whst:this.LxTime && dateFormat(this.LxTime[0], 'YYYY-MM-DD'),//联系时间开始
              whet:this.LxTime && dateFormat(this.LxTime[0], 'YYYY-MM-DD'),//联系时间结束
              tShenri:this.kehuAge.value && this.kehuAge.value.split(',')[0],//年龄开始
              tShenri1:this.kehuAge.value && this.kehuAge.value.split(',')[1],//年龄结束
              spf:this.userScore.value && this.userScore.value.split(',')[0],//评分开始
              epf:this.userScore.value && this.userScore.value.split(',')[1],//评分结束
              zhzt:this.zhState.value//账户状态
            }
          }).then((data)=>{
            
            if(data.data.state){
              this.$toast({
                message: data.data.message
              })
            }else{
                this.$message({
                  message: data.data.message || '创建成功',
                  type: 'success'
                });
                this.dialogFormVisible = false
                this.getTabledata(1,10)
            }
            
          })
       },
      getCollect(){//分配人数数据
        this.$get(this,{
          api:'/pond/collect.do'
        }).then((data)=>{
          this.tableData = data.data.content
        })
      },
      getTabledata(item){//获取表格数据
      let pageNum
      if(!item){
        pageNum = this.page
      }else{
        pageNum = item
      }
      
      const pagesizeNum = this.pageSize.value
        this.$get(this,{
          api:'/pond/showPondPlan.do',
          data:{
            page:pageNum,
            pageSize:pagesizeNum
          }
        }).then((data)=>{
          this.callInfoLoc.tableData=data.data.content.data
          
        })
      },
      choiceFn(){
        this.$get(this,{
          api:"/pond/loadPond.do",
          data:{
            khxz:this.kehuXZ.value,//新增客户性质
            fRegfrom:this.kehuLY.value,//新增客户来源
            tDate:this.registerTime && dateFormat(this.registerTime[0], 'YYYY-MM-DD'),//注册时间开始
            tDate1:this.registerTime && dateFormat(this.registerTime[1], 'YYYY-MM-DD'),//注册时间结束
            whst:this.LxTime && dateFormat(this.LxTime[0], 'YYYY-MM-DD'),//联系时间开始
            whet:this.LxTime && dateFormat(this.LxTime[0], 'YYYY-MM-DD'),//联系时间结束
            tShenri:this.kehuAge.value && this.kehuAge.value.split(',')[0],//年龄开始
            tShenri1:this.kehuAge.value && this.kehuAge.value.split(',')[1],//年龄结束
            spf:this.userScore.value && this.userScore.value.split(',')[0],//评分开始
            epf:this.userScore.value && this.userScore.value.split(',')[1],//评分结束
            zhzt:this.zhState.value//账户状态
          }
        }).then((data)=>{
          this.$get(this,{
            api:'/pond/findKf.do'
          }).then((data)=>{
            this.allKfs = data.data.content
          })
            this.sxNum = data.data.content
            this.dialogFormVisible = true
        })
      }
    }
  }
  
</script>
<style lang="scss" scoped>
$bdColor: #bfcbd9;
.fbBox{
  margin-bottom:20px;
}
.targetPage{
    width: 60px;
    line-height: 20px;
    border: 1px solid #888;
    color: #48576a;
    text-align: center;
    display: inline-block;
    margin-right:20px;
  }
.div1{
 margin-bottom:20px;
 overflow:hidden;
}
.pagerBox{
    margin:15px 0; float:right;font-size:14px;
  }
 .pager {
    width: 100px;
    line-height: 20px;
    border: 1px solid #d1dbe5;
    color: #48576a;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    border-radius: 10px;
    font-size:14px;
  }
.div2{
  float:left;
  margin-right:30px;
  margin-bottom:20px;
  width:150px;
}
.text_input{
  border:1px solid #ccc;
  width:80px;
  text-align: center;
  line-height:30px;
  float:right;
}
.look{
  color:blue;
  text-decoration: underline;
}

.callInfoGlo__tableBox {
  position:relative;
  width:100%;
  height:295px;
  overflow-x:auto;
  padding-top:20px;
  .noWrapBox{
    position:absolute;
    display:flex;
    flex-wrap:nowrap;
  }
  .table {
    float: left;
    text-align: center;
    border-top:1px solid $bdColor;
    &:last-child{
      border-right:1px solid $bdColor;
    }
    border-top:1px solid $bdColor;
    &.ths {
      width: 150px;
    }
    &.tds {
      width: 80px;
    }
    li {
      line-height: 45px;
      font-size: 14px;
      border-left: 1px solid $bdColor;
      border-bottom: 1px solid $bdColor;
    }
  }
}

.callDetailWrapper{
  border-top:1px solid $bdColor;
  padding-top:20px;
}
.el-row{
  padding-left:20px;
  margin-bottom:10px;
}
.dadai-upload{
  float:left;
}
.tools{
  padding:0 0 20px 20px;
}
.tools .div1{
  width:100px;
  float:left;
}
.tools .div2{
  width:800px;
  float:left;
}
.watch {
  color: #5394fc;
  cursor: pointer;
}

.daidalist{
  width:100%;
  margin-bottom:8px;
  text-align:center;
  border-left:1px solid $bdColor;
  border-top:1px solid $bdColor;
  font-size:14px;
  th,td{
    line-height:40px;
    border-right:1px solid $bdColor;
    border-bottom:1px solid $bdColor;
  }
}
</style>
